<template>
  <div ref="chartRef" style="width: 600px; height: 400px"></div>
  <button @click="open2">点击</button>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getBarData } from './api/index.ts'
import { ElMessage } from 'element-plus'
const chartRef = ref()
const router = useRouter()

const state = reactive({
  barData: [],
})

const initEchart = () => {
  const myChart = echarts.init(chartRef.value)

  const option = {
    title: {
      text: '点击我跳转',
      left: 'center',
      triggerEvent: true, // 必须加这个，才能点击 title 触发事件
    },
    xAxis: {
      type: 'category',
      data: ['一月', '二月', '三月'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        type: 'bar',
        data: [120, 200, 150],
      },
    ],
  }

  myChart.setOption(option)

  // 监听点击事件
  myChart.on('click', (params) => {
    console.log('点击事件参数:', params)
    getBarData()

    // if (params.componentType === 'title') {
    // router.push('/orders') // 替换为你的目标路由
    // }
  })
}
const open2 = () => {
  ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}
onMounted(() => {
  initEchart()
})
</script>
